<template>
  <div>
    <el-form
      ref="connectionFormRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      label-position="top"
    >   
      <el-form-item label="服务器地址" prop="host">
        <el-input
          v-model="formData.host"
          placeholder="请输入MQTT服务器地址"
          class="input-with-select"
        >
        </el-input>
      </el-form-item> 
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="port" label="端口">
            <el-input 
              v-model="formData.port" 
              placeholder="请输入端口" 
              type="number"  
              :min="1" 
              :max="65535" 
              controls-position="right"
            >
            </el-input>
          </el-form-item>
        </el-col>
        
        <el-col :span="12">
          <el-form-item prop="timeout" label="超时时间">
            <el-input 
              v-model="formData.timeout" 
              placeholder="请输入超时时间" 
              type="number" 
              :min="1"
            >
              <template #append>秒</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      

	  
		<el-row :gutter="20">
			<el-col :span="12">
			  <el-form-item label="客户端ID" prop="clientId">
				<el-input v-model="formData.clientId" />
			  </el-form-item>
			</el-col>
			<el-col :span="12">
			  <el-form-item prop="keepalive" label="保持连">
				<el-input 
					v-model="formData.keepalive" 
					placeholder="请输入保持连" 
					type="number" 
					:min="1"
				>
				  <template #append>秒</template>
				</el-input>
			  </el-form-item>
			</el-col>
		</el-row>
		
		<el-row :gutter="20">
			<el-col :span="8">
			  <el-form-item label="自动重连" prop="reconnect">
				<el-switch v-model="formData.reconnect" />
			  </el-form-item>
			</el-col>
			<el-col :span="8">
			  <el-form-item label="清理会话" prop="clean">
				<el-switch v-model="formData.clean" />
			  </el-form-item>
			</el-col>
		</el-row>
		<!-- <el-divider content-position="left">遗嘱消息配置</el-divider> -->
		

		
		
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, reactive } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { MqttConnectionField } from '@/components/DataWorkflow/types/data-collect.ts' // 假设这是MQTT连接字段类型

const props = defineProps<{ 
  data: MqttConnectionField
}>()

const connectionFormRef = ref<FormInstance>()
const formRules = reactive<FormRules>({
  host: [
    { required: true, message: '请输入MQTT服务器地址', trigger: 'blur' },
    { 
      validator: (_, value, callback) => {
        if (!value) {
          callback(new Error('请输入MQTT服务器地址'))
        } else if (!/^((mqtt|tcp|ws|wss)?:\/\/)?[^\s/$.?#].[^\s]*$/i.test(value)) {
          callback(new Error('请输入有效的MQTT服务器地址'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  port: [
    { required: true, message: '请输入端口号', trigger: 'blur' },
    { 
      type: 'number',
      min: 1,
      max: 65535,
      message: '端口号必须在1-65535之间',
      trigger: 'blur'
    }
  ],
  timeout: [
    { required: true, message: '请输入超时时间', trigger: 'blur' },
    { 
      type: 'number',
      min: 1,
      message: '超时时间必须大于0',
      trigger: 'blur'
    }
  ]
})

const formData = ref<MqttConnectionField>({ 
  ...props.data 
})

watch(() => props.data, (val: MqttConnectionField) => {
  formData.value = { ...formData.value, ...val }
}, { immediate: true, deep: true })

const validate = async (): Promise<boolean> => {
  if (!connectionFormRef.value) return false
  try {
    await connectionFormRef.value.validate()
    return true
  } catch {
    return false
  }
}

const getData = (): MqttConnectionField => {
  return formData.value
}

defineExpose({
  validate,
  getData
})
</script>

<style scoped>
.input-with-select {
  width: 100%;
}
</style>